<template>
	<view style="background-color: #fefefe;margin-bottom: 10rpx;margin-top: 15rpx;border-radius: 15rpx;">
		<view class="container u-skeleton">
			<view class="userinfo">
				<view>
					<u-avatar :src="userInfo.avatarUrl" style="margin-right: 30rpx;" @click='watchUserInfo(userInfo)'>
					</u-avatar>
					<text class="u-skeleton-fillet">{{userInfo.nickname}}</text>
					<text class="u-skeleton-fillet" style="float: right;">{{computedTime}}</text>
				</view>
			</view>
			<view style="margin: 20px 0">
				<u-read-more toggle="true" show-height="250" class="lists">
					<rich-text :nodes="userInfo.content"></rich-text>
				</u-read-more>
				<!-- </view> -->
			</view>
			<view class="foot">
				<view style="display: flex;justify-content: space-between;width: 100%;">
					<view style="width: 60%;display: flex;align-items:center;">
						<view @click="thumb" style="margin-right: 20rpx;">
							<u-icon class='operation' name="thumb-up" :color="thumbColor" size="48" />
							<text>{{thumbNum}}</text>
						</view>
						<view @click="reply">
							<u-icon class='operation' name="more-circle" color="#000000" size="48" />
							<text>{{replyNum}}</text>
						</view>
						<Commment :openReply="openReply" @rebackReply='getReback' />
					</view>
					<view style="display: flex;">
						<u-icon class='operation' @click="deleteComment" name="trash-fill" color="#5e5e5e" size="48" />
						<view @click="report">
							<u-icon class='operation' name="error-circle" color="#aa0000" size="48" />
						</view>
					</view>
				</view>

			</view>
		</view>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import Commment from './comment.vue'
	import {
		timeAgo
	} from '../../utils/remarkUtil.js'
	export default {
		data() {
			return {
				// 随意填充一些模拟数据，以撑开元素，供骨架组件查询和模拟块状数据
				loading: false, // 是否显示骨架屏组件
				openReply: false,
				remarkContent: '',
				thumbColor: 'gray',
				//如果大于99 需要显示 99＋
				thumbNum: 23,
				replyNum: 99
			}
		},
		components: {
			Commment
		},
		props: {
			userInfo: {}
		},
		computed: {
			computedTime: function() {
				return timeAgo(this.userInfo.createTime);
			},
			hasUserInfos: function() {
				console.log("被调用");
				if (this.userInfo == null) {
					this.loading = true;
				} else {
					this.loading = false;
				}
			}
		},
		methods: {
			watchUserInfo(userInfo) {
				console.log("查看" + userInfo.username + "个人信息");
			},
			thumb() {
				if (this.thumbColor === 'gray') {
					this.thumbColor = 'red'
					this.thumbNum++;
					//todo
				} else {
					this.thumbColor = 'gray'
					this.thumbNum--;
					//todo
				}
			},
			reply() {
				uni.hideTabBar();
				this.openReply = true;
			},
			getReback(data) {
				uni.showTabBar();
				this.openReply = data;
			},
			report() {
				console.log("举报");
			},
			deleteComment() {
				console.log("删除用户评论（只有用户本人和管理员才有资格删除）");
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding: 20rpx 60rpx;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: left;
	}

	.userinfo-avatar {
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 50%;
	}

	.lists {
		margin: 10px 0;
	}

	.foot {
		display: flex;
		justify-content: space-between;
	}

	.operation {
		color: gray;
	}
</style>
